// Create the canvas
var canvas = document.createElement("canvas"); 

 var ctx = canvas.getContext("2d"); 

canvas.width = 512; 

canvas.height = 480; 

document.body.appendChild(canvas);

// Background image 

var bgReady = false; 

var bgImage = new Image();

bgImage.onload = function () { 

 bgReady = true; 

}; 

bgImage.src = "images/background.png";

// Hero image 

var heroReady = false; 

var heroImage = new Image(); 

heroImage.onload = function () { 

 heroReady = true; 

}; 

heroImage.src = "images/hero.png";

// Monster image 

var monsterReady = false; 

var monsterImage = new Image(); 

monsterImage.onload = function () { 

 monsterReady = true; 

}; 

monsterImage.src = "images/monster.png";
// Chomp sound
var snd = new Audio("audio/bell.wav");
// Game objects 

var hero = { speed: 256, // movement in pixels per second 

 x: 0, y: 0 

 }; 

var monster = { x: 0, y: 0 }; 

var monstersCaught = 0;

// Handle keyboard controls 

var keysDown = {}; 

addEventListener("keydown", function (e) { keysDown[e.keyCode] = true; }, false); 

addEventListener("keyup", function (e) { delete keysDown[e.keyCode]; }, false);

// Reset the game when the player catches a monster 
var start = true;
var reset = function () { 
	
if (start){
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
start = false;
}

// Throw the monster somewhere on the screen randomly

monster.x = 32 + (Math.random() * (canvas.width - 128)); 

monster.y = 32 + (Math.random() * (canvas.height - 128)); 

//Add in the reset function
if(snd.currentTime > 0)
{
snd.currentTime=0;
//this is to make sure the sound resets if it is still playing
}
snd.play();
};

// Update game objects 

var update = function (modifier) { 
	

if (38 in keysDown) { // Player holding up
hero.y = (hero.y > 32) ? (hero.y - hero.speed * modifier) : hero.y;
}
if (40 in keysDown) { // Player holding down
hero.y = (hero.y < canvas.height - 80) ? (hero.y + hero.speed * modifier) : hero.y;
}
if (37 in keysDown) { // Player holding left
hero.x = (hero.x > 32) ? (hero.x - hero.speed * modifier) : hero.x;
}
if (39 in keysDown) { // Player holding right
hero.x = (hero.x < canvas.width - 64) ? (hero.x + hero.speed * modifier) : hero.x;
}

 // Are they touching? 

 if ( hero.x <= (monster.x + 30) && monster.x <= (hero.x + 30) && hero.y <= (monster.y + 45) 

&& monster.y <= (hero.y + 45) ) { 

 ++monstersCaught; 

 reset(); }
};
 
// Draw everything 

var render = function () { 

 if (bgReady) { 

 ctx.drawImage(bgImage, 0, 0); } 

 if (heroReady) { 

 ctx.drawImage(heroImage, hero.x, hero.y); } 

 if (monsterReady) { 

 ctx.drawImage(monsterImage, monster.x, monster.y); } 

 // Score 

 ctx.fillStyle = "rgb(255,255,0)"; 

 ctx.font = "24px Helvetica"; 

 ctx.textAlign = "left"; 

 ctx.textBaseline = "top"; 

 ctx.fillText("Goblins caught: " + monstersCaught, 285, 32); 

};

// The main game loop 

var main = function () { 

 var now = Date.now(); 

 var delta = now - then; 

 update(delta / 1000); render(); then = now; 

};

// Let's play this game! 

reset(); 

var then = Date.now(); 

setInterval(main, 1); // Execute as fast as possible